Подборка отличных генераторов CSS3 и HTML5
Большому мастеру, знатоку и профессионалу HTML5 и CSS3 возможно и не нужны всякого рода генераторы кода (хотя и ему они могут принести не мало пользы и сэкономить время). Новичку, любителю или человеку осваивающему данные языки они могут стать неплохим подспорьем. Сегодня я как раз я подготовил для вас подборку таких генераторов. Не смотря на то, что стандарты HTML5 и CSS3 пусть и появились достаточно давно, используются они далеко не всеми веб-дизайнерами. Возможно, с помощью генераторов вам будет проще их применять.
Генераторы CSS3
Хотите определить стили? В этом вам помогут генераторы CSS3. Мне удалось найти достаточно большое их количество, поэтому я сгруппировал однотипные сервисы (а иногда и плагины) в подгруппы:
Универсальные CSS3-генераторы
К данному сервису приложил руку известный дизайнер Эрик Хоффман (Eric Hoffman). Функционал данного генератора вряд-ли способен впечатлить (вы можете определять только border-radius, box-shadow, background gradient и opacity), зато все сделано очень удобно — значения регулируются на глаз ползунками, имеется превью в режиме реального времени и так далее.
Еще одна приятная фича — после того как вы нажмете кнопку «Get the Code», в появившемся окне вы можете галочками отметить (или наоборот, убрать лишнее) дополнительные «опции» (не знаю как то еще назвать) кода, например, совместимость со старыми браузерами или комментарии.
CSS3 Maker — куда более функционально насыщенный чем предыдущий сервис, по сути он умеет все что вам может потребоваться. Помимо основного меню CSS3 Styles, в генераторе имеются закладки — Border Radius, Gradient, CSS Transform, CSS Animation, CSS Transition, RGBA, Text Shadow, Text Rotation, Box Shadow и @Font Face. То есть, если вы ищите, генератор-комбайн («все в одном»), возможно CSS3 Maker — ваш выбор!
CSS3 Generator — еще один неплохой универсальный генератор, обладающий практически тем же функционалом, что CSS3 Maker, но, на мой вкус, чуть менее удобный (хоть и обладающий более простым интерфейсом). В первую очередь за счет того, что здесь отсутствуют удобные ползунки и вам необходимо прописывать точные значения параметров. Хотя, для кого-то это, естественно, недостатком не является.
Генераторы CSS3 кнопок
С помощью CSS3-Tricks Button Maker создать красивую кнопку (кнопки) может даже абсолютный «чайник». Единственная (но очень серьезная) претензия к сервису — функционал мог бы быть побогаче, все таки речь о CSS3. Данный генератор все возможностей стандарта, конечно, не реализует.
Данный генератор можно уже без всяких натяжек назвать честным CSS3-генератором. В арсенале сервиса не только самые обыденные эффекты, но и весьма продвинутые — имеется внутренняя тень (inner shadow), вы можете добавить сразу две тени тексту кнопки и так далее. В конце концов, все остальные эффекты имеют гораздо большее «контроля» (число настроек).
Весьма неплохой удобный генератор кнопок. Обладает очень простым интерфейсом, а потому пользоваться им одно удовольствие. Мне кажется, CSS3 Button Generator — отличный выбор для новичков!
Border-генераторы
Хотите задать интересный стиль границ на основе какого-то изображения? Вам по адресу, Border-Image это умеет!
Материалистичный и очень простой инструмент. Не отягощен функционалом, зато очень удобен когда вам нужно задать разный радиус для скругленных углов! Для этого задайте требуемое значение в каждом углу.
Генератор градиентов
Color Zilla Gradient Editor (ссылки ниже)
Color Zilla Gradient Editor — удобный и практичный генератор градиентов. В отличие от всех описанных выше инструментов является расширением для браузера, а не сервисом, что впрочем, пожалуй, даже хорошо. В арсенале «Колорзилла» есть пипетка (Color Picker), которой гораздо удобнее орудовать когда ее не нужно вызывать из интерфейса какого-нибудь сервиса.
Drop Shadow генератор
Очень простой генератор, задающий значение свойства box-shadow. Вы можете регулировать размер тени, ее цвет, прозрачность, уровень размытия (Blur), источник света (смещение) и прочее.
Прочие генераторы
Это в большей мере даже не генератор, а обучающий продукт. Вам дан шаблон, вы можете отключать/включать те или иные правила, менять значение и смотреть что получится. Отличное практическое пособие для тех кто познает новый стандарт CSS3 или просто знакомится с основами HTML и CSS верстки.
HTML5
HTML5-генераторы, это по-сути не что иное, как генератор семантического шаблона. В данный обзор я умышленно не включив всем известный HTML5 Boilerplate, поскольку он и без того широко известен и любим вебмастерами всего мира. Давайте менее распространенных представителей:
С помощью данного сервиса удобно создать «балванку» и тем самым сэкономить массу времени. Генератор не предлагает ничего сверхъестественного, тем не менее, штука полезная.
Еще один достаточно удобный генератор шаблона. Приглянулся мне тем, что позволяет заранее выбрать нужные элементы (section, nav, article, footer, aside и пр.)
Не самый модный, но вполне пригодный генератор. Новичкам он вряд-ли понравится, а вот продвинутому вебмастеру приглянуться может. Надеюсь данные HTML5 и CSS3 генераторы помогут вам просто и легко создавать элементы сайтов, используя самые современные стандарты и технологии.
P.S. Карточные игры всегда были популярны в разных ситуациях, но игра покер заняла свою особенную нишу как спорт и даже способ заработка денег в сети.
Сделайте замечательный подарок своей девушке — элитная парфюмерия http://makeup.com.ua/ в нашем интернет магазине представлена всеми популярными брендами.
Загрузка...
Нашел еще один прикольный онлайн сервис на русском языке — germansoft.ru/lesson/online/css-generation.php
Автор опубликовал образцы выполненных работ. Прикольно.